import React from 'react';
import styles from './styles.styl';
import util from '../../../util'
import cx from 'classnames'
import ReviewHeader from '../../review/new/tool/ReviewHeader';
import {Button} from 'sq-ui';
import { Modal, error, success, Input } from '../../../ui-components';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as okrAction from '../../../actions/okr.action';
import ProjectTeamItem from './ProjectTeamItem';

@connect(({ okr}) => ({ okr}), dispatch => ({actions: bindActionCreators({...okrAction}, dispatch)}))
class ProjectTeamAdmin extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'ProjectTeamAdmin';

    this.state = {
      createAddTeam: false,
      teamName: '',
    };
  }
  componentDidMount() {
    const {
      params,
    } = this.props;
    this.props.actions.fetchProjectTeam(params.teamId);
  }
  goBack = () => {
    this.context.router.push({
      pathname: '/okr',
      query: {
        type: 2,
        teamId: this.props.params.teamId,
      }
    });
  }
  toggleAddModal = (flag) => {
    this.setState({
      createAddTeam: flag,
      teamName: '',
      projectId: '',
    })
  }
  toggleEditModal = (flag, id, name) => {
    this.setState({
      createEditTeam: flag,
      teamName: flag ? name : '',
      projectId: flag ? id : '',
    })
  }
  createTeam = () => {
    if(!this.state.teamName){
      error('请填写项目组名');
      return;
    }
    const {
      params,
    } = this.props;
    this.props.actions.addProjectTeam(params.teamId,{projectTeamName: this.state.teamName},() => {
      this.toggleAddModal(false);
    });
  }
  editTeam = () => {
    if(!this.state.teamName){
      error('请填写项目组名');
      return;
    }
    const {
      params,
    } = this.props;
    this.props.actions.updateProjectTeam(params.teamId, this.state.projectId, {projectTeamName: this.state.teamName},() => {
      this.toggleEditModal(false);
      success('修改成功')
    });
  }
  render() {
    return (
      <div >
        <ReviewHeader title={'团队管理'} goBack={this.goBack}  />
        <div className={styles['title']}>
          项目组管理
          <Button label={'添加项目组'} blue style={{marginLeft: '30px',fontSize: '14px', height: '30px'}} onClick={this.toggleAddModal.bind(this, true)} />
        </div>
        <div className={styles['container']}>
        {
          this.props.okr.projectTeamList.map((v,i) => {
            return <ProjectTeamItem key={i} item={v} handleUpdate={this.toggleEditModal}/>
          })
        }
        </div>
        <Modal
          active={this.state.createAddTeam}
          onRequestClose={this.toggleAddModal.bind(this,false)}
          actions={[
            'cancel',
            this.createTeam
          ]}
          title="创建项目组"
        >
          <div className={styles.createTeamForm}>
            <div>
              <Input 
                value={this.state.teamName} 
                onChange={(e) => this.setState({ teamName: e.target.value })} 
                placeholder="项目组名称"
              />
            </div>
          </div>
        </Modal>
        <Modal
          active={this.state.createEditTeam}
          onRequestClose={this.toggleEditModal.bind(this,false)}
          actions={[
            'cancel',
            this.editTeam
          ]}
          title="编辑项目组"
        >
          <div className={styles.createTeamForm}>
            <div>
              <Input 
                value={this.state.teamName} 
                onChange={(e) => this.setState({ teamName: e.target.value })} 
                placeholder="项目组名称"
              />
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default ProjectTeamAdmin;
